<template>
  <div id="app">
      <header>
          <span :class="{'blue':active===ind}" v-for="(item,ind) in navList" :key="ind" @click="change(item,ind)">{{item}}</span>
      </header>
      <div class="con">
          <!-- 没有信息 -->
            <div class="list" v-if="list.length">
              <list-item :list="list"></list-item>
            </div>
            <div v-else>没有信息</div>

      </div>
  </div>
</template>

<script>
import axios from 'axios'
import listItem from './components/list-item'

export default {
    name: 'App',
    components: {
        listItem
    },
    data(){
        return {
            navList:['未开始','已打卡','已放弃','全部'],
            list:[],
            active:0
        }
    },
    created(){
        this.getData('未开始')
    },
    methods:{
        change(status,ind){
            this.getData(status);
            this.active = ind;
        },
        getData(status){
            axios.get(`/api/list?status=${status}`).then((res) =>{
                if(res.data.code === 1){
                    this.list = res.data.data;
                }
            })
        }
    }
}
</script>

<style lang="scss">
    .blue{
        color:blue;
        border-bottom:1px solid blue;
    }
</style>
